<template>
	<div class="u-plhead pylst_header" v-if="songsheettopList">
		<div class="plhead_bg" :style="{'background-image': `url(${songsheettopList.coverImgUrl})`}"></div>
		<div class="plhead_wrap">
			<div class="plhead_fl lsthd_fl"><img class="u-img" :src="songsheettopList.coverImgUrl">
				<span class="lsthd_icon">
					
				<!-- react-text: 3703 -->歌单<!-- /react-text -->
				</span>
				<i class="u-earp lsthd_num">{{setnum(songsheettopList.playCount)}}</i>
			</div>
			<div class="plhead_fr">
				<h2 class="f-thide2 f-brk lsthd_title">{{songsheettopList.name}}</h2>
				<div class="lsthd_auth f-thide">
					<div class="lsthd_link" href="/m/user?id=471558244">
						<div class="u-avatar lsthd_ava">
							<img class="u-img" :src="songsheettopList.creator.avatarUrl">
						</div>
						<!-- react-text: 3710 -->{{songsheettopList.creator.nickname}}
						<!-- /react-text -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			songsheettopList:''
		},
		methods : {
			setnum(num) {
				if (num < 100000000) {
				return Math.floor(num / 1000) / 10 + "万";
				} else {
				return Math.floor(num / 10000000) / 10 + "亿";
				}
		}
	}
		}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.u-plhead {
    position: relative;
    padding: 30px 10px 30px 15px;
    overflow: hidden;
    	.plhead_bg {
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50%;
		    filter: blur(20px);
		    -webkit-transform: scale(1.5);
		    transform: scale(1.5);
		}
    	.plhead_bg,.plhead_bg:after {
		    position: absolute;
		    left: 0;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    z-index: 1;
		}
		.plhead_bg:after {
		    content: " ";
		    background-color: rgba(0,0,0,.25);
		}
		.plhead_bg,.plhead_bg:after {
		    position: absolute;
		    left: 0;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    z-index: 1;
		}
		.plhead_wrap {
		    display: flex;
		    position: relative;
		    z-index: 2;
		    .plhead_fl {
			    position: relative;
			    width: r(228px);
			    height: r(228px);
			    background-color: #e2e2e3;
			    .u-img {
				    width: 100%;
				    vertical-align: middle;
				}
				.lsthd_icon {
				    position: absolute;
				    z-index: 3;
				    top: r(20px);
				    left: 0;
				    padding: 0 r(16px);
				    height: r(34px);
				    color: #fff;
				    font-size: r(18px);
				    text-align: center;
				    line-height: r(34px);
				    background-color: rgba(217,48,48,.8);
				    border-top-right-radius: r(34px);
				    border-bottom-right-radius: r(34px);
				}
				.lsthd_num {
				    position: absolute;
				    right: r(4px);
				    top: 0;
				    z-index: 3;
				    padding-left: r(30px);
				    color: #fff;
				    font-size: r(24px);
				    background-position: 0;
				    background-repeat: no-repeat;
				    background-size: r(22px) r(20px);
				    text-shadow: r(2px) 0 0 rgba(0,0,0,.15);
				    font-style: normal;
				}
				.u-earp {
				    background-image: url();
				}
			}
			.lsthd_fl:after {
			    content: " ";
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 100%;
			    height: r(36px);
			    z-index: 2;
			    background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.2));
			}
			.plhead_fr {
			    flex: 1 1 auto;
			    width: 1%;
			    margin-left: r(32px);
			    .lsthd_title {
				    padding-top: r(2px);
				    font-size: r(34px);
				    font-weight: 400;
				    line-height: 1.3;
				    color: #fefefe;
				    height: r(88px);
				    display: -webkit-box;
				}
				.f-thide2,.f-thide3,.f-thide4 {
			        overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;
				    -webkit-box-orient: vertical;
				}
				.f-brk {
				    word-wrap: break-word;
				    word-break: break-all;
				    white-space: normal;
				}
				.lsthd_auth {
				    display: block;
				    position: relative;
				    margin-top: r(20px);
			    	.lsthd_link {
					    display: inline-block;
					    color: hsla(0,0%,100%,.7);
					    font-size: r(28px);
					    .lsthd_ava {
						    display: inline-block;
						    width: r(60px);
						    height: r(60px);
						    border-radius: 50%;
						    vertical-align: middle;
						    margin-right: r(10px);
						}
						.u-avatar {
						    position: relative;
						    width: 100%;
						    .u-img {
							    border-radius: 50%;
							    width: 100%;
    							vertical-align: middle;
							}
						}
						.lsthd_ava {
						    display: inline-block;
						    width: 30px;
						    height: 30px;
						    border-radius: 50%;
						    vertical-align: middle;
						    margin-right: 5px;
						}
					}
				}
				.f-thide {
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    word-break: normal;
				}
			}
		}
	}
</style>